<template>
  <el-menu mode="horizontal">
<!--    主页-->
    <el-menu-item index="/index/main">商店主页</el-menu-item>
<!--    商品列表-->
    <el-menu-item v-for="(brand,aindex) in phone" :key="aindex">
      <el-dropdown trigger="click" :hide-on-click="false">
        <span class="el-dropdown-link">{{brand.brand_name}}</span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(series,bindex) in phone[aindex].series" :key="bindex">
            <el-dropdown trigger="click" placement="right">
              <span>{{series.series_name}}</span>
              <el-dropdown-menu slot="dropdown">
                <div v-for="(type,cindex) in phone[aindex].series[bindex].types" :key="cindex">
                  <el-dropdown-item @click.native="showInfo">{{type.types_name}}</el-dropdown-item>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dialog :visible.sync="infoDialog" width="40%">
        <span slot="title">iPhone13 Pro Max</span>
        <el-row>
          <el-col :span=10>
            <el-image :src="require('@/'+img)"></el-image>
          </el-col>
          <el-col :span=14>
            <el-descriptions size="medium" direction="vertical">
              <el-descriptions-item label="尺寸">英寸</el-descriptions-item>
              <el-descriptions-item label="处理器"></el-descriptions-item>
              <el-descriptions-item label="硬盘">G起</el-descriptions-item>
              <el-descriptions-item label="屏幕像素"></el-descriptions-item>
              <el-descriptions-item label="重量">g</el-descriptions-item>
              <el-descriptions-item label="电池容量">最长可达小时</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <div slot="footer">
          <el-button @click="infoDialog = false">取 消</el-button>
          <el-button type="primary" icon="el-icon-shopping-cart-1" @click="addToCart">加入购物车</el-button>
        </div>
      </el-dialog>
    </el-menu-item>
<!--    头像-->
    <el-menu-item id="avatar" v-show="loginState">
      <Avatar v-on:setLoginState="getLoginState" ref="avatar"></Avatar>
    </el-menu-item>
<!--    购物车-->
    <el-menu-item id="cart" v-show="loginState">
      <Cart></Cart>
    </el-menu-item>
<!--    登录注册-->
    <el-menu-item id="register" v-show="!loginState">
      <Register v-on:setLoginState="getLoginState"></Register>
    </el-menu-item>
<!--    搜索-->
    <el-menu-item id="search">
      <Search></Search>
    </el-menu-item>
<!--    &#45;&#45;-->
  </el-menu>
</template>

<script>
import Cart from "./Cart";
import Search from "./Search";
import Avatar from "./Avatar";
import Register from "./Register";
export default {
  name: "Header",
  components: {Register, Avatar, Search, Cart},
  data() {
    return {
      loginState: false,
      infoDialog: false,

      img:'assets/apple/iphone13pro.jpeg',
      items: [
        {
          brand_name: '',
          series: [
            {
              series_name: '',
              types: [
                {
                  types_name: ''
                }
              ]
            }
          ]
        }
      ],
      phone: [
        {
          brand_name: 'Apple',
          series: [
            {
              series_name: 'iPhone13',
              types: [
                {
                  types_name: 'iPhone13 Pro Max'
                },
                {
                  types_name: 'iPhone13 Pro'
                },
                {
                  types_name: 'iPhone13'
                },
                {
                  types_name: 'iPhone13 mini'
                },
              ]
            },
            {
              series_name: 'iPhone12',
              types: [
                {
                  types_name: 'iPhone12 Pro Max'
                },
                {
                  types_name: 'iPhone12 Pro'
                },
                {
                  types_name: 'iPhone12'
                },
                {
                  types_name: 'iPhone12 mini'
                },
              ]
            },
          ]
        },
        {
          brand_name: '华为',
          series: [
            {
              series_name: 'Mate',
              types: [
                {
                  types_name: 'Mate 40',
                }
              ]
            }
          ]
        }
      ],
    }
  },
  methods: {
    getLoginState() {
      this.loginState = this.$store.state.isLogin;
      this.$refs.avatar.setName();
    },
    showInfo() {
      this.infoDialog = true;
    },
    addToCart() {
      if(this.$store.state.isLogin) {
        this.infoDialog = false;
        this.$message.success('添加成功');
        //往下继续写此方法将商品加入数据库

      } else {
        this.$message.warning('请先登录');
      }
    }
  },
}
</script>

<style scoped>
#search{
  float: right;
}
#register{
  float: right;
}
#avatar{
  float: right;
}
#cart{
  float: right;
}
</style>
<!--    <el-submenu v-for="(brand,aindex) in phone" :key="aindex" :index="brand.brand_name">-->
<!--      <template slot="title">{{brand.brand_name}}</template>-->
<!--      <el-submenu v-for="(series,bindex) in phone[aindex].series" :key="bindex" :index="series.series_name">-->
<!--        <template slot="title">{{series.series_name}}</template>-->
<!--        <el-menu-item v-for="(type,cindex) in phone[aindex].series[bindex].types" :key="cindex" :index="type.types_name">{{type.types_name}}</el-menu-item>-->
<!--      </el-submenu>-->
<!--    </el-submenu>-->

<!--    <el-menu-item v-for="(brand,aindex) in phone" :key="aindex">-->
<!--      <el-dropdown trigger="click">-->
<!--      <span class="el-dropdown-link">{{brand.brand_name}}</span>-->
<!--        <el-dropdown-menu slot="dropdown">-->
<!--          <el-popover trigger="hover" placement="right" v-for="(series,bindex) in phone[aindex].series" :key="bindex">-->
<!--            <el-row>-->
<!--              <el-col v-for="(type,cindex) in phone[aindex].series[bindex].types" :key="cindex">-->
<!--                <el-link>{{type.types_name}}</el-link>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--            <el-dropdown-item slot="reference">{{series.series_name}}</el-dropdown-item>-->
<!--          </el-popover>-->
<!--        </el-dropdown-menu>-->
<!--      </el-dropdown>-->
<!--    </el-menu-item>-->
